<script>
  import { metatags, page } from "@sveltech/routify";
  import {
    Button,
    Column,
    Content,
    Grid,
    InlineNotification,
    Link,
    Row,
    Select,
    SelectItem,
    Tab,
    TabContent,
    Tabs,
  } from "carbon-components-svelte";
  import Code from "carbon-icons-svelte/lib/Code.svelte";
  import { onMount } from "svelte";
  import COMPONENT_API from "../COMPONENT_API.json";
  import ComponentApi from "../components/ComponentApi.svelte";
  import { theme } from "../store";

  const REPO_URL = "REPO_URL";

  export let component = $page.title;
  export let components = [component];
  export let unreleased = false;
  export let unstable = false;

  metatags.title = $page.title;

  const componentMap = new Map(
    COMPONENT_API.components.map((c) => [c.moduleName, c]),
  );

  $: api_components = components.map((i) => componentMap.get(i));
  $: multiple = api_components.length > 1;

  onMount(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const current_theme = searchParams.get("theme");

    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
      theme.set(current_theme);
    }
  });

  function formatSourceURL(multiple) {
    const filePath = api_components[0]?.filePath ?? "";

    if (multiple) {
      /**
       * Link to folder for doc with multiple components.
       * @example "src/Breadcrumb"
       */
      return filePath.split("/").slice(0, -1).join("/");
    }

    /**
     * Else, link to the component source.
     * @example "src/Tile/ClickableTile.svelte"
     */
    return filePath;
  }

  $: sourceCode = `${REPO_URL}/tree/master/${formatSourceURL(multiple)}`;
</script>

<svelte:head>
  <link
    rel="canonical"
    href="https://svelte.carbondesignsystem.com/components/{component}"
  />
</svelte:head>

<Content data-components>
  <Grid class="fix-overflow">
    <Row>
      <Column>
        <h1>{component}</h1>
        <div class="bar">
          <Select
            id="select-theme"
            inline
            labelText="Theme"
            bind:selected={$theme}
          >
            <SelectItem value="white" text="White" />
            <SelectItem value="g10" text="Gray 10" />
            <SelectItem value="g80" text="Gray 80" />
            <SelectItem value="g90" text="Gray 90" />
            <SelectItem value="g100" text="Gray 100" />
          </Select>
          <Button
            kind="ghost"
            target="_blank"
            size="field"
            href={sourceCode}
            icon={Code}
          >
            Source code
          </Button>
        </div>
        {#if unreleased}
          <InlineNotification
            lowContrast
            kind="info"
            title="Unreleased"
            subtitle="This component has not been released yet."
            hideCloseButton
          />
        {/if}
        {#if unstable}
          <InlineNotification
            lowContrast
            kind="warning"
            title="Unstable component"
            subtitle="Expect the API of this component to change. Use at your own risk."
            hideCloseButton
          />
        {/if}
      </Column>
    </Row>

    <Row>
      <Column class="prose">
        <div class="toc mobile">
          <h5>Examples</h5>
          <slot name="aside" />
        </div>
        <slot />
        <h2 id="component-api">Component API</h2>
        <p>
          API documentation is
          <Link
            inline
            href="https://github.com/carbon-design-system/sveld"
            target="_blank"
          >
            auto-generated by sveld.
          </Link>
        </p>
      </Column>
    </Row>

    <Row>
      <Column class="prose" noGutter={multiple}>
        {#if multiple}
          <Tabs class="override-tabs">
            {#each api_components as component (component.moduleName)}
              <Tab label={component.moduleName} />
            {/each}
            <div slot="content" style="padding-top: var(--cds-spacing-06)">
              {#each api_components as component (component.moduleName)}
                <TabContent>
                  <ComponentApi {component} />
                </TabContent>
              {/each}
            </div>
          </Tabs>
        {:else}
          <ComponentApi component={api_components[0]} />
        {/if}
      </Column>
    </Row>
  </Grid>

  <Column class="table" xlg={4} lg={5}>
    <div class="toc">
      <h5>Examples</h5>
      <slot name="aside" />
    </div>
  </Column>
</Content>

<style>
  .bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--cds-layout-02);
    border-bottom: 1px solid var(--cds-ui-03);
  }

  :global(.toc h5) {
    margin-top: var(--cds-spacing-06);
    margin-bottom: var(--cds-spacing-03);
  }

  .toc.mobile {
    display: none;
  }

  @media (max-width: 1056px) {
    .toc.mobile {
      display: block;
      margin-bottom: var(--cds-spacing-09);
    }
  }
</style>
